<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义表</title>
        <#include "/pubHeadStyle.html">
        <link rel="stylesheet" href="${ctx}/css/form.css">
        <link rel="stylesheet" href="${ctx}/css/font/iconfontie.css" media="all"/>
        <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
    </head>
    <body>
        <form class="layui-form">
            <div class="layui-row" style="margin-top: 15px;margin-bottom:15px">
                <table>
                    <tr>
                        <td>
                            <label class="layui-form-label" style="width: auto">选择数据源: </label>
                        </td>
                        <td>
                            <select name="dataSource" id="dataSource">
                                <option value="LOCAL">本地数据源</option>
                            </select>
                        </td>

                        <td>
                            <label class="layui-form-label" style="width: auto">查询表: </label>
                        </td>
                        <td style="position: relative;">
                            <input type="text" name="tableName" id="tableName" class="layui-input"/>
                        </td>
                        <td>
                            <p style="margin-left:12px;" class="layui-btn layui-btn-sm" id="search">
                                <i class="layui-icon layui-icon-search"></i>查询
                            </p>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
        <div class="externalTable" style="width: 100%">
            <table id="tableList" lay-filter="tableList"></table>
        </div>
        <script type="text/html" id="headerToolBar">
            <div class="layui-btn-container" style="position: absolute;bottom: 0;text-align: center;width: 100%;">
                <button class="layui-btn" lay-event="nextStep">下一步</button>
                <button class="layui-btn layui-btn-danger" id="return"></i>取消</button>
            </div>
        </script>
        <script>
            layui.config({
                base: serverPath.formPath + staticPath.formPath //静态资源所在路径
            }).extend({
                index: 'index' //主入口模块
            }).use(['index', 'setter', 'form', 'jquery', 'table', 'layer', 'setter'], function () {
                var form = layui.form;
                var layer = layui.layer;
                var table = layui.table;
                var $ = layui.$;
                var setter = layui.setter;
                //关闭弹窗
                var index = parent.layer.getFrameIndex(window.name);
                $(document).on('click', '#return', function () {
                    parent.layer.close(index);
                });
                //获取全部数据源
                $.ajax({
                    url: serverPath.systemPath + setter.sysLinkPath + 'dataSource/listAll',
                    type: "post",
                    dataType: 'json',
                    success: function (result) {
                        if (result.data.length > 0) {
                            var text = "";
                            for (var i = 0; i < result.data.length; i++) {
                                text += "<option value='" + result.data[i]["alias"] + "'>" + result.data[i]["alias"] + "</option>"
                            }
                            $("#dataSource").append(text);
                            form.render('select');
                        }
                    }
                });
                //加载空表格
                var result = new Array();
                loadTable(result);

                //查询此数据源下的表
                $("#search").click(function () {
                    var tableName = $("#tableName").val();
                    var dataSource = $("#dataSource option:selected").val();
                    $.ajax({
                        url: serverPath.formPath + setter.formLinkPath + 'table/getTableList',
                        type: "post",
                        dataType: 'json',
                        data: {"tableName": tableName, "dataSource": dataSource},
                        success: function (data) {
                            if (data.code == 0) {
                                var result = new Array();
                                $.each(data.data, function (i) {
                                    result.push({"tableName": i, "tableDesc": data.data[i]})
                                });
                                loadTable(result);
                            } else {
                                layer.alert(data.msg);
                            }

                        }
                    })
                });

                function loadTable(result) {
                    table.render({
                        elem: '#tableList'
                        , data: result
                        , height: '500'
                        , page: true
                        , defaultToolbar: []
                        , text: {
                            none: '请根据数据源来查询外部表并且选择其中一张表' //默认：无数据
                        }
                        , cellMinWidth: 80
                        , toolbar: "#headerToolBar"
                        , cols: [[
                            {type: 'radio', fixed: 'left'}
                            , {field: 'tableName', title: '表名', width: 470}
                            , {field: 'tableDesc', title: '表注释', width: 470}
                        ]]
                    });
                }

                //获取checkbox
                table.on('toolbar(tableList)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    var data = checkStatus.data; //获取选中行数据
                    switch (obj.event) {
                        case 'nextStep':
                            if (data.length == 0) {
                                layer.alert("请先选择一个表!");
                            } else {
                                var tableName = data[0]["tableName"];
                                var dataSource = $('#dataSource option:selected').val();
                                var index = parent.layer.getFrameIndex(window.name);
                                layer.open({
                                    type: 2,
                                    area: ['1000px', '650px'],
                                    title: ['保存外部表'],
                                    content: serverPath.formPath +  setter.formLinkPath + 'table/view/editExternalTable?tableName=' + tableName + "&dataSource=" + dataSource+"&closeIndex="+index
                                })
                            }
                            break;
                    }
                });
            });
        </script>
        <style>
            .layui-table-body {
                overflow-x: hidden;
            }
        </style>
    </body>
</html>